<style>

.example_wrapper {
	padding: 5px;
}

table.examples {
}

table.examples th {
	width: 300px;
	padding: 5px 0 2px;
}

table.examples th.input {
}

table.examples th.output {
}

table.examples td {
	padding: 15px 20px;
}

table.examples .odd td {
	background-color: #ddd;
}

div.more {
	width: 590px;
	margin-top: 5px;
	border-top: 1px solid #aaa;
	border-top: none;
	padding-top: 2px;
	padding-right: 10px;
	text-align: right;
}

</style>

<div class="example_wrapper">

	<table class="examples markdown">
		<thead>
			<th class="output">To Get This:</th>
			<th class="input">Type This:</th>
		</thead>

		<tbody>
			<tr class="odd">
				<td>I <i>love</i> that.</td>
				<td>I _love_ that.</td>
			</tr>
			<tr>
				<td>Let's go <b>now.</b></td>
				<td>Let's go **now.**</td>
			</tr>
			<tr class="odd">
				<td>Visit <a href="http://snowballapp.com">SnowBall</a>.</td>
				<td>Visit [SnowBall](http://snowballapp.com).</td>
			</tr>
			<tr>
				<td><a href="http://snowballapp.com">http://snowballapp.com</a></td>
				<td>&lt;http://snowballapp.com&gt;.</td>
			</tr>
			<tr class="odd">
				<td><h1>HeadLine</h1></td>
				<td># HeadLine</td>
			</tr>
			<tr>
				<td><h2>Smaller Headline</h2></td>
				<td>## Smaller Headline</td>
			</tr>
			<tr class="odd">
				<td><h6>Smallest Headline</h6></td>
				<td>###### Smallest Headline</td>
			</tr>
			<tr>
				<td><%= image_tag "rails.png", :alt => "Alt text" %></td>
				<td style="vertical-align: middle">![Alt text](/path/to/image.jpg)</td>
			</tr>
			<tr class="odd">
				<td>How do I love thee?<br />Let me count the ways.</td>
				<td>End each line with two spaces.</td>
			</tr>
		</tbody>
	</table>

	<div class="more">
		See more about <%= link_to "Markdown", "http://daringfireball.net/projects/markdown", :target => "_blank" %> (<%= link_to "syntax", "http://daringfireball.net/projects/markdown/syntax", :target => "_blank" %>)
	</div>

</div>
